<div class="shopping-car">
  <div class="shopping-car-head">

    <div class="shopping-car-logo">
      <img src="./assets/tmp/img/cad/assemblyDrawing.png" style="width: 100%;height: 100%;border-radius: 10px;">
    </div>

    <div class="shopping-car-title">配件篮确认单</div>

    <div class="shopping-car-black">
      <button apes-button apesType="primary" (click)="black()">返回</button>
    </div>
  </div>

  <apes-card class="shopping-car-main">

    <apes-card *ngFor="let item of shoppingData; let i = index;" [apesTitle]="mainTitle">
      <ng-template #mainTitle>
        <!--<label apes-checkbox [(ngModel)]="item.selected"-->
        <!--(change)="checkSelectAll()">-->
        <label>
          <span style="position: relative;top: 3px;">{{item.vin}}+{{item.QCCPMC}}</span>
        </label>
      </ng-template>
      <!--[apesExtra]="mainRemove"-->
      <!--<ng-template #mainRemove>-->
      <!--<div class="shopping-car-remove">-->
      <!--<i apes-icon apesType="delete" (click)="deleteShop(shoppingData,i)"></i>-->
      <!--</div>-->
      <!--</ng-template>-->
      <div>
        <apes-table class="shopping-car-table" #partsTable apesBordered [apesData]="item.parts"
                    [apesFrontPagination]="false" [apesShowPagination]="false" [apesScroll]="{ y: '65vh' }">
          <thead>
          <tr>
            <!--<th style="width: 5%;" apesShowExpand></th>-->
            <th style="width: 5%;" apesShowCheckbox
                [(apesChecked)]="selectAll"
                (apesCheckedChange)="clickSelectAll()"></th>
            <th style="width: 5%;">位置</th>
            <th style="width: 15%;">零件编号/商品编号</th>
            <th style="width: 15%;">零件名称/商品名称</th>
            <th style="width: 15%;">配件名称</th>
            <th style="width: 10%;">备注1</th>
            <th style="width: 10%;">备注2</th>
            <th style="width: 10%;">订货数量</th>
            <th style="width: 5%;">EPC图</th>
            <th style="width: 10%;">操作</th>
          </tr>
          </thead>
          <tbody>
          <ng-template ngFor let-data [ngForOf]="partsTable.data">
            <tr>
              <!--<td apesShowExpand [(apesExpand)]="data.expand"></td>-->
              <td apesShowCheckbox
                  apesBreakWord
                  style="width: 5%;"
                  [(apesChecked)]="data.selected"
                  (apesCheckedChange)="checkSelectAll()"></td>
              <td apesBreakWord style="width: 5%;">{{data.imageSN ? data.imageSN : '--'}}</td>
              <td apesBreakWord style="width: 15%;">{{data.partCode}}</td>
              <td apesBreakWord style="width: 15%;">{{data.partName}}</td>
              <td apesBreakWord style="width: 15%;">{{showPartsName(data.parts)}}</td>
              <td apesBreakWord style="width: 10%;">{{filterName(data.notes)}}</td>
              <td apesBreakWord style="width: 10%; white-space: pre-wrap" [innerHTML]="data.positionConfirma"></td>
              <td apesBreakWord style="width: 10%;">
                <div class="shopping-car-num">
                  <apes-input-group [apesPrefix]="addTemplate" [apesSuffix]="pruneTemplate">
                    <input type="number" style="text-align: center" apes-input [(ngModel)]="data.orderQuantity"
                           (change)="checkNum(data)"/>
                  </apes-input-group>
                  <ng-template #addTemplate>
                    <div class="shopping-car-num-btn" (click)="setNum(data,'prune')">-</div>
                  </ng-template>
                  <ng-template #pruneTemplate>
                    <div class="shopping-car-num-btn" (click)="setNum(data,'add')">+</div>
                  </ng-template>
                </div>
              </td>

              <td apesBreakWord style="width: 5%;">
                <div class="shopping-car-img-box">
                  <img *ngIf="data.url" class="shopping-car-img" (click)="showImg(data.urls)" [src]="data.url.url"/>
                  <div *ngIf="!data.url" class="shopping-car-noImg">
                    <i apes-icon apesType="file-image"></i>
                  </div>
                </div>
              </td>
              <td apesBreakWord style="width: 10%;">
                <span class="shopping-car-delete" (click)="deleteShop(data,i)">删除</span>
              </td>
            </tr>
            <!--<tr [apesExpand]="data.expand">-->

            <!--<td>关联商品</td>-->
            <!--<td colspan="8">-->
            <!--<div>-->
            <!--<apes-table #productsTable apesBordered [apesData]="data.products" [apesShowPagination]="false">-->
            <!--<thead>-->
            <!--<tr>-->
            <!--<th style="width: 20%;">商品名称</th>-->
            <!--<th style="width: 10%;">售价</th>-->
            <!--<th style="width: 10%;">计量单位</th>-->
            <!--<th style="width: 20%;">产品描述</th>-->
            <!--<th style="width: 10%;">本地库存</th>-->
            <!--<th style="width: 10%;">总仓库存</th>-->
            <!--<th style="width: 10%;">订购数量</th>-->
            <!--<th style="width: 10%;">操作</th>-->
            <!--</tr>-->
            <!--</thead>-->
            <!--<tbody>-->
            <!--<ng-template ngFor let-data let-index [ngForOf]="productsTable.data">-->
            <!--<tr>-->
            <!--<td>{{ data.name }}</td>-->
            <!--<td>{{ data.price }}</td>-->
            <!--<td>{{ data.unit }}</td>-->
            <!--<td>{{ data.remark }}</td>-->
            <!--<td>{{ data.local }}</td>-->
            <!--<td>{{ data.central }}</td>-->
            <!--<td>-->
            <!--<div class="shopping-car-num">-->
            <!--<apes-input-group [apesPrefix]="addTemplate" [apesSuffix]="pruneTemplate">-->
            <!--<input type="number" style="text-align: center" apes-input [(ngModel)]="data.num" (change)="checkNum(data)"/>-->
            <!--</apes-input-group>-->
            <!--<ng-template #addTemplate>-->
            <!--<div class="shopping-car-num-btn" (click)="setNum(data,'add')">+</div>-->
            <!--</ng-template>-->
            <!--<ng-template #pruneTemplate>-->
            <!--<div class="shopping-car-num-btn" (click)="setNum(data,'prune')">-</div>-->
            <!--</ng-template>-->
            <!--</div>-->
            <!--</td>-->
            <!--<td>-->
            <!--<span class="shopping-car-delete" (click)="deleteShop(productsTable.data,index)">删除</span>-->
            <!--</td>-->
            <!--</tr>-->
            <!--</ng-template>-->
            <!--</tbody>-->
            <!--</apes-table>-->
            <!--</div>-->
            <!--</td>-->
            <!--</tr>-->
          </ng-template>
          </tbody>
        </apes-table>
      </div>
    </apes-card>

    <div class="shopping-car-empty" *ngIf="shoppingData.length == 0">
      <!--购物篮已清空，请重新添加-->
      <apes-empty [apesNotFoundContent]="contentTpl">
        <ng-template #contentTpl>
          <span>购物篮已清空，请重新添加</span>
        </ng-template>
      </apes-empty>
    </div>

  </apes-card>

  <div class="shopping-car-footer">
    <div class="shopping-car-footer-left">

    </div>
    <div class="shopping-car-footer-right">
      <div class="shopping-car-footer-checkbox">
        <label apes-checkbox [(ngModel)]="selectAll"
               [disabled]="isLoading"
               (ngModelChange)="clickSelectAll()">
          <span style="position: relative;top: 3px;">全选</span>
        </label>
      </div>
      <div class="shopping-car-footer-remove">
        <span class="footer-remove-btn" (click)="removeAll()">清空</span>
      </div>
      <div class="shopping-car-footer-parts">总计：订购{{partsNumber()}}件</div>
      <div class="shopping-car-footer-btn">
        <button apes-button [apesType]="'primary'" [disabled]="!checkSelectParts()" [apesLoading]="isLoading"
                (click)="goProgram()">导入到{{custom == 'lossQuotation' ? '定损报价' : '服务方案'}}</button>
      </div>
    </div>
  </div>

  <div *ngIf="isLoading" class="shopping-car-loading">
    <apes-spin [apesSpinning]="isLoading" [apesSize]="'large'" [apesIndicator]="indicatorTemplate">
    </apes-spin>
    <ng-template #indicatorTemplate>
      <div class="shopping-car-loading-progress">
        <div>生成对应商品中.....</div>
        <apes-progress
          [apesPercent]="percent"
          [apesStrokeColor]="{ '0%': '#108ee9', '100%': '#87d068' }"
          apesStatus="active"
        ></apes-progress>
      </div>
    </ng-template>

  </div>
</div>
